<template>
  <div class="">

    <el-form class="el_form" ref="addForm" :model="addForm" :rules="addFormRules" size="small" label-width="140px">
      <div class="top_info">
        <el-form-item label="客户姓名：">{{info.name}}</el-form-item>
        <el-form-item label="客户手机：">{{info.phone}}</el-form-item>
        <el-form-item label="预约门诊：">{{info.hospitalName}}</el-form-item>
        <el-form-item label="预约时间：">{{info.appointmentTime}}</el-form-item>
      </div>
      <el-form-item label="满意度：" prop="receptionService">
        <div class="area_box">
          <el-input type="textarea" v-model="addForm.receptionService" class="a_area" maxlength="1500" :resize="areaResize" :rows="areaRows"></el-input>
          <div class="show_example">例：对门诊的接待、服务、面诊，还满意吗？</div>
        </div>
      </el-form-item>
      <el-form-item label="权益：" prop="outpatientSurroundings">
        <div class="area_box">
          <el-input type="textarea" v-model="addForm.outpatientSurroundings" class="a_area" maxlength="1500" :resize="areaResize" :rows="areaRows"></el-input>
          <div class="show_example">例：挂号，检查，拍片有没有额外收费？</div>
        </div>
      </el-form-item>
      <el-form-item label="价格：" prop="doctorExpert">
        <div class="area_box">
          <el-input type="textarea" v-model="addForm.doctorExpert" class="a_area" maxlength="1500" :resize="areaResize" :rows="areaRows"></el-input>
          <div class="show_example">例：医生给出的价格，跟我们介绍的有没有不一致的？</div>
        </div>
      </el-form-item>
      <el-form-item label="方案：" prop="other">
        <div class="area_box">
          <el-input type="textarea" v-model="addForm.other" class="a_area" maxlength="1500" :resize="areaResize" :rows="areaRows"></el-input>
          <div class="show_example">
            例：医生有没有出详细的治疗方案？那您对方案有不理解的吗？
          </div>
        </div>
      </el-form-item>
      <el-form-item label="复诊/顾虑：" prop="worry">
        <div class="area_box">
          <el-input type="textarea" v-model="addForm.worry" class="a_area" maxlength="1500" :resize="areaResize" :rows="areaRows"></el-input>
          <div class="show_example">例：医生有没有跟您约下次复诊的时间？/今天您没定下来，主要的顾虑是什么？</div>
        </div>
      </el-form-item>
      <el-form-item label="是否出现投诉：" prop="hasComplaint">
        <el-radio-group v-model="addForm.hasComplaint">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="投诉内容：" v-if="addForm.hasComplaint == 1" prop="complaintContent">
        <div class="area_box">
          <el-input type="textarea" v-model="addForm.complaintContent" class="a_area" maxlength="1500" :resize="areaResize" :rows="areaRows"></el-input>
          <div class="show_example">
            <p>例：医生专业度、报价不一致、环境恶劣、服务态度差</p>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="btn_group">
          <el-button type="primary" size="small" :loading="aloading" @click="saveInfo">保 存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { ADDRETURNVISIT } from "@/http/book";
import { deepClone, showToast } from "@/common/util";
export default {
  name: "ShopVisit",
  props: {
    info: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      addForm: { hasComplaint: 0 },
      areaRows: 2,
      areaResize: "none",
      addFormRules: {
        receptionService: [
          { required: true, message: "请填写满意度", trigger: "blur" },
        ],
        outpatientSurroundings: [
          { required: true, message: "请填写权益", trigger: "blur" },
        ],
        doctorExpert: [
          { required: true, message: "请填写价格", trigger: "blur" },
        ],
        other: [{ required: true, message: "请填写方案", trigger: "blur" }],
        worry: [
          { required: true, message: "请填写复诊/顾虑", trigger: "blur" },
        ],
        hasComplaint: [
          { required: true, message: "请选择是否出现投诉", trigger: "change" },
        ],
        complaintContent: [
          { required: true, message: "请填写投诉内容", trigger: "blur" },
        ],
      },
      aloading: false,
    };
  },
  mounted() {},
  methods: {
    // 保存
    saveInfo() {
      let _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = deepClone(_this.addForm);
        oParams.orderId = this.info.id;
        if (oParams.hasComplaint == 0) {
          delete oParams.complaintContent;
        }
        _this.aloading = true;
        ADDRETURNVISIT(oParams)
          .then((res) => {
            _this.aloading = false;
            if (res.code == 200) {
              showToast({
                message: "保存成功",
                type: "success",
              });
              _this.$emit("change", { id: "shopVisitDialog" });
            }
          })
          .catch(() => {
            _this.aloading = false;
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.top_info {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    flex: 0 0 50%;
  }
}
.el_form {
  .a_input,
  .a_select {
    width: 240px;
  }
  .a_area {
    width: 400px;
  }
  .tips {
    font-size: 12px;
    color: #999;
    margin: 0 0 0 10px;
  }
}
.area_box {
  display: flex;
  .a_area {
    flex: 1;
  }
  .show_example {
    flex: 1;
    padding-left: 10px;
    font-size: 12px;
    p {
      margin: 0;
      padding: 0;
    }
  }
}
</style>